<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const password = ref('')

const handleChange = (val: string) => {
  if (val === 'admin') {
    visible.value = true
  } else {
    visible.value = false
  }
}
</script>

<template>
  <div class="lock-container base-container c-center">
    <div class="icon">
      <SvgIcon
        v-if="!visible"
        name="lock"
        size="20px"
        color="#ffffff"
      ></SvgIcon>
      <SvgIcon
        v-if="visible"
        name="unlock"
        size="20px"
        color="#ffffff"
      ></SvgIcon>
    </div>
    <div class="input">
      <ElInput
        v-model="password"
        placeholder="请输入密码"
        show-password
        autofocus
        @input="handleChange"
      ></ElInput>
    </div>
  </div>
</template>

<style scoped lang="scss">
.lock-container {
  flex-direction: column;
  gap: 12px;

  .icon {
    width: 20px;
    height: 20px;
  }

  .input {
    width: 300px;
  }
}
</style>
